<template>
	<view style="height: 100%">
		<!-- <van-overlay z-index="5" :show="couponShade"> -->
		<u-overlay z-index="5" :show="couponShade">
			<view class="wrapper_wrap">
				<view class="wrapper">
					<view class="block">
						<image style="width: 90%; height: 1000rpx; position: absolute; left: 40rpx"
							src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/bg.png"></image>
						<view class="couponShade">
							<view class="zc_title">注册即送</view>
							<view class="xr_title">
								<image style="width: 63rpx; height: 9rpx"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/decorate-1.png">
								</image>
								<view class="xr_text">新人专享好礼</view>
								<image style="width: 63rpx; height: 9rpx"
									src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/decorate-2.png">
								</image>
							</view>
							<view class="popup_icon_list">
								<view class="popup_icon_item" v-if="jlfsDetail.fwf">
									<image
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/Popup-icon1.png">
									</image>
									<view class="popup_icon_des">免服务费{{ jlfsDetail.fwf.giveCount }}次</view>
								</view>
								<view class="popup_icon_item" v-if="jlfsDetail.jlj">
									<image
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/Popup-icon2.png">
									</image>
									<view class="popup_icon_des">奖励金{{ jlfsDetail.jlj.bonusAmount }}元</view>
								</view>
								<view class="popup_icon_item" v-if="jlfsDetail.jf">
									<image
										src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/Popup-icon3.png">
									</image>
									<view class="popup_icon_des">积分{{ jlfsDetail.jf.giveIntegral }}分</view>
								</view>
							</view>
							<view class="coupon" v-if="yhqDetail.couponOptionApplyDetailList && yhqDetail.couponOptionApplyDetailList.length">
								<view class="coupon_title" v-if="yhqDetail">
									优惠券x{{ yhqDetail.couponOptionDetail.totalCount }}，价值{{ yhqDetail.couponOptionDetail.totalAmount }}元
								</view>

								<view class="coupon_list">
									<scroll-view v-if="yhqDetail" :scroll-y="true">
										<view class="coupon_item"
											v-for="(item, index) in yhqDetail.couponOptionApplyDetailList" :key="index">
											<view class="coupon_item_type" v-if="item.couponType == 1">服务费券</view>

											<view class="coupon_item_type" v-if="item.couponType == 2">电费券</view>

											<view class="coupon_item_type" v-if="item.couponType == 3">现金券</view>

											<view class="coupon_item_money">
												<text>￥</text>
												<text>{{ item.amount }}</text>
											</view>

											<view class="coupon_item_des">满{{ item.couponAmount }}可用</view>
										</view>
									</scroll-view>
								</view>

							</view>
							<view class="coupon_btn" @tap="toLogin">
								<text>注册领取</text>
							</view>
						</view>

						<image
							style="width: 741rpx; height: 819rpx; position: absolute; top: -120rpx; left: -30rpx; z-index: -1"
							src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/light.png"></image>
						<image @tap="couponClose"
							style="width: 44rpx; height: 44rpx; position: absolute; right: 30rpx; top: -60rpx"
							src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/delete.png"></image>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- </van-overlay> -->
	</view>
</template>

<script lang="ts">
	// import zpMixins from '@/uni_modules/zp-mixins/index';
	// import vanOverlay from './@vant/weapp/overlay/index';
	// components/activityPopup.ts
	const app = getApp();
	import { getNewUserRewards, getNewUserRewardsDetail } from '../../api/marketing/popUpApi';
	export default {
		components: {
			// vanOverlay
		},
		data() {
			return {
				couponShade: false,
				//注册即送
				jlfsDetail: {
					fwf: {
						giveCount: ''
					},

					jlj: {
						bonusAmount: ''
					},

					jf: {
						giveIntegral: ''
					}
				},
				yhqDetail: {
					couponOptionDetail: {
						totalCount: '',
						totalAmount: ''
					},

					couponOptionApplyDetailList: []
				}
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			// yqMsg: {
			//   type: Object,
			//   value: {},
			// }
		},
		mounted() {
			// 处理小程序 attached 生命周期
			this.attached();
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			attached: function () {
				// 在组件实例进入页面节点树时执行
				console.log('nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn');
			},

			//成功注册领取奖励;
			successZhucu() {
				// console.log(wx.getStorageSync('newUserRegisterStatus'),'-----------')
				if (uni.getStorageSync('newUserRegisterStatus') == 2) {
					console.log('点击注册领取成功啦,code==200赋值为2关闭弹窗啦');
					// this.couponClose();//关闭新人注册弹窗

					// //先关闭弹窗,800毫秒后弹出领取成功信息
					setTimeout(() => {
						uni.showToast({
							title: `新人礼包领取成功\r\n可以在【我的】页面查看`,
							icon: 'none',
							duration: 3000
						});
					}, 800);
					// // 删除缓存中的新人状态
					uni.removeStorageSync('newUserRegisterStatus');
					this.couponShade = false
				} else {
					console.log('弹窗没关闭,也没弹成功信息', uni.getStorageSync('newUserRegisterStatus'));
				}
			},

			// 关闭注册即送
			couponClose() {
				this.setData({
					couponShade: false
				});
			},
			getNewUserRewardsFn(){
				getNewUserRewards({
					sellerId: app.globalData.sellerId
				})
				.then((res : any) => {
					console.log(res, '获取新人注册活动id....');
					if (res.code == 200 && res.data) {
						console.log(res.data, '有新人活动,并获取新人有礼接口的活动id');
						// #ifdef APP-PLUS
						if(!uni.getStorageSync('token')){
							this.getHdDetail(res.data);
						}
						// #endif
						
						// #ifdef MP-WEIXIN
						if (uni.getStorageSync('firstRegister')) {
						    this.getHdDetail(res.data);
						} else {
						    console.log('是老用户啊,所以有新人注册活动也不弹!!!');
						}
						// #endif
						
					} else {
						console.log('没有新人注册有礼活动,所以不弹新人注册弹窗啊.....');
					}
				})
				.catch((err) => {
					console.log(err);
				});
			},

			//获取新人注册活动id
			getNewUserHd() {
				// #ifdef MP-WEIXIN
				console.log('是微信小程序的新人活动, 判断是新人---------')
				app.uniLogin().then(res => {
					let inviteType = uni.getStorageSync('inviteType');
					console.log(inviteType,'邀请活动的进来状态是什么????')
					if (res.firstRegister && inviteType!=1) {
						console.log('是新用户啊,所以才会弹新人注册活动!!!, 并且不是邀请活动进来的时候才弹');
						this.getNewUserRewardsFn()
					}
				})
				//#endif

				// #ifndef MP-WEIXIN
				console.log('不是微信小程序的新人活动, 不判断新人----------')
				this.getNewUserRewardsFn()
				//#endif
			},

			//获取新人活动方法
			getHdDetail(HD : any) {
				if(!HD) return
				getNewUserRewardsDetail({
					id: HD
				})
					.then((res : any) => {
						console.log(res.data, '获取新人注册弹窗信息详情啊!!!');
						if (res.code == 200) {
							
							let yhqDetail = res.data.couponDetail || {}
							yhqDetail.couponOptionApplyDetailList = yhqDetail.couponOptionApplyDetailList || []
							this.setData({
								jlfsDetail: {
									fwf: res.data.serviceFeeDetail,
									jlj: res.data.bonusDetail,
									jf: res.data.integralDetail
								},
								yhqDetail,
								couponShade: true
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},

			// 注册领取
			toLogin() {
				uni.setStorageSync('clickNewUserRegisterBag', 88888);
				uni.navigateTo({
					url: '/packagePersonal/pages/login/login'
				});
			},
			showFn() {
				// //获取新人注册活动id
				this.getNewUserHd();

				//成功注册领取奖励;
				this.successZhucu();
			}
		},
		created: function () {
			this.showFn()
		}
	};
</script>
<style lang="less">
	@import '../../pages/index/home-popup.less';
</style>